<script setup>
const props = defineProps(['mem'])

const centerDialogVisible = ref(false)
</script>
<template>
    <div class="vuemem">
        <div class="level" @click="centerDialogVisible = true"> 
            {{ props.mem.id }} {{ props.mem.level }} {{ props.mem.name }}
        </div>
    </div>
    <el-dialog
    v-model="centerDialogVisible"
    title="Warning"
    width="80%"
    align-center
  >
    <div class="memdialog">{{ props.mem.id }} {{ props.mem.level }} {{ props.mem.name }}</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<style>
.vuemem{
    /* background: red; */
    width: 90%;
    background: palegreen;
    margin: auto;
    border-radius: 10px;
}


.dialog-footer button:first-child {
  margin-right: 10px;
}
.memdialog{
    width:300px;
    height:300px;
}
</style>
